<template>
	<view class="valuate-container">
		<view class="title-row">
			<text class="title-item">您的问题是否已经解决了？</text>
			<view class="iconfont icon-cancelquxiao" @click="close"></view>
		</view>
		<view class="dispose-wrap">
			<view class="dispose-item" :class="{bgc:dealState === 1}" @click="onDeal">
				<view class="iconfont icon-dui" :class="{'deal-color':dealState === 1}"></view><text class="deal-text">已解决</text>
			</view>
			<view class="dispose-item" :class="{bgc:dealState === 2}" @click="onDisDeal">
				<view class="iconfont icon-fujianguanbi" :class="{'disdeal-color':dealState === 2}"></view><text class="deal-text">未解决</text>
			</view>
		</view>
		<view class="title-row row-two">
			<text class="title-item">请对本次服务评价</text>
		</view>
		<view class="dispose-rate"><text class="rate-label">总体</text>
			<uni-rate v-model="form.opinionRating" :size="23" :margin="10"></uni-rate>
		</view>
		<view class="dispose-input">
			<textarea class="uni-input" v-model.trim="form.feedback" maxlength="50" placeholder="您的反馈会督促我们做得更好(最多50个字)" />
			</view>
		<view class="submit" >
			<text class="submit-btn" @click="onSubmit" :class="{opacity:enable}">提交</text>
		</view>
	</view>
</template>

<script>
	import UniRate from '@/components/uni-icons/icons.js'
	import {
		comment
	} from '@/api/index.js'
	export default {
		components: {
			UniRate
		},
		data() {
			return {
				form: {
					isTrue: '',
					opinionRating: '',
					feedback: ''
				},
				dealState:0,
				enable:false,
			}
		},
		props: {
			commentInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		watch:{
			form:{
				handler(val){
					const {isTrue,opinionRating,feedback} = val
					if(isTrue!==''||opinionRating||feedback){
						this.enable = true
					}else{
						this.enable = false
					}
				},
				deep:true
			}
		},
		methods: {
			onDeal() {
				this.form.isTrue = 1
				this.dealState = 1
			},
			onDisDeal() {
				this.form.isTrue = 0
				this.dealState = 2
				
			},
			onSubmit() {
				if (!this.commentInfo.meetingId || !this.enable) {
					return
				}
				const params = {
					...this.form,
					...this.commentInfo
				}
				comment(params).then(res => {
					this.form.closeType=true
					this.$emit('commentClose',this.form)
					uni.showToast({
					    title: '评价成功！',
					    duration: 2000
					});
				})
			},
			close() {
				this.form.closeType=false
				this.$emit('commentClose',this.form)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/font/iconfont.scss';
	.bgc{
		background: linear-gradient(269deg, #FECB7D 0%, #FFDDAB 100%) !important;
	}
	.deal-color{
		color:#FF9A58 !important;
	}
	.disdeal-color{
		color:#ff5952 !important;
	}
	.valuate-container {
		padding:30upx;
		font-size: 30upx;
		color: #72819B;
		background-color: #fff;
		box-sizing: border-box;
	}
	.title-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title-item {
			font-weight: 600;
		}
		.icon-cancelquxiao{
			font-size: 30upx;
			color: #acacac;
		}
	}

	.dispose-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
        margin-top:20upx;
		.dispose-item {
			width: 330upx;
			height: 60upx;
			line-height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F1F4F9;
			border-radius: 4px;
		}
		.icon-dui,
		.icon-fujianguanbi{
			font-size: 46upx;
			color:#b2baca;
		}
	}

	.row-two{
		margin-top:40upx;
	}
	
	.dispose-rate {
		margin-top:20upx;
		display: flex;
		align-items: center;
		.rate-label {
			margin-right: 10upx;
		}
	}

	.dispose-input {
		margin-top: 40upx;
		.uni-input {
			width: auto;
			background: #F1F4F9;
			border-radius: 4px;
			height: 120upx;
			padding:20upx 30upx;
			font-size: 13px;
			color: #999999;
		}
	}

	.submit {
		margin-top: 30upx;
		text-align: center;
		&-btn {
			display: inline-block;
			text-align: center;
			color: #fff;
			width: 488upx;
			height: 80upx;
			line-height: 80upx;
		     background: linear-gradient(90deg, #3861FE 0%, #489BFE 100%);
		      box-shadow: 0 4px 6px -2px rgba(59,162,255,0.34);
		      border-radius: 44upx;
			  opacity: 0.3;
		}
		& .opacity{
		opacity: 1;	
	    }
	}
</style>
